<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 500px;
				margin: 50px auto;
			}
			#result{
				width: 408px;
				height: 70px;
				background: orange;
				font-size: 40px;
				line-height: 70px;
				text-align: right;
				margin: 20px 0;
			}
			form p.input_box input{
				width: 198px;
				height: 60px;
				border: 1px solid #ddd;
				margin-bottom: 20px;
			}
			form p.btn input{
				width: 80px;
				height: 60px;
				font-size: 30px;
				border: none;
				outline: none;
			}
		</style>
		<script type="text/javascript">
		//加法
			function add(){
			//第一步,获取两个文本框 的值 
				var add01=document.getElementById("input01").value;
					add01=parseFloat(add01); //进行类型转换,再赋值给自己
				
				var add02=document.getElementById("input02").value;
					add02=parseFloat(add02);
				
			//第二步,让这两个值相加，得到一个新的值,赋值给结果
				var result=add01+add02;
				
			//第三步,把新的值再赋回页面
				document.getElementById("result").innerText = result;
			}
				
		//减法
			function minus(){
				var minus01=document.getElementById("input01").value;
					minus01=parseFloat(minus01); //进行类型转换,再赋值给自己
				
				var minus02=document.getElementById("input02").value;
					minus02=parseFloat(minus02);
				
				var result=minus01-minus02;
				
				document.getElementById("result").innerText = result;	
			}
			
		//乘法
			function multiply(){
				var multiply01=document.getElementById("input01").value;
					multiply01=parseFloat(multiply01); //进行类型转换,再赋值给自己
				
				var multiply02=document.getElementById("input02").value;
					multiply02=parseFloat(multiply02);
				
				var result=multiply01*multiply02;
				
				document.getElementById("result").innerText = result;	
			}
			
		//除法
			function divide(){
				var divide01=document.getElementById("input01").value;
					divide01=parseFloat(divide01); //进行类型转换,再赋值给自己
				
				var divide02=document.getElementById("input02").value;
					divide02=parseFloat(divide02);
				
				var result=divide01/divide02;
				
				document.getElementById("result").innerText = result;	
			}
		</script>
	</head>
	<body>
		<div id="box">
			<h1>小小计算器</h1>
			<p id="result">0</p>
			<form action="">
				<p class="input_box">
					<input id="input01" type="text" value="" />
					<input id="input02" type="text" value="" />
				</p>
				<p class="btn">
					<input onclick="add()" type="button" value="+" />
					<input onclick="minus()" type="button" value="-" />
					<input onclick="multiply()" type="button" value="*" />
					<input onclick="divide()" type="button" value="/" />
				</p>
			</form>
		</div>
	</body>
</html>
